<template>
    <div class="index">
        <div class="left-area-box">
            <my-left-area class="index-left" :leftcontent='leftcontent' :title='title' @leftAreaSuccess='leftAreaSuccess'></my-left-area>
        </div>
        <div class="index-right">
            <!-- 头 -->
            <div class="right-header">
                <div class="header-left">
                    <span>{{headerTitle}}</span>
                </div>
                <div class="header-right">
                    <span>欢迎您，{{uname}}</span>
                    <span style="padding-right:30px;padding-left:15px">{{format(time)}}</span>
                    <span class="out" @click="out()" style="color: #57A7FD;">退出</span>
                </div>
            </div>
            <div class="inner-box">
                <h3 class="pagetitleClick">
                    <span>{{pagetitle}}</span>
                    <span v-if="pagetitle2" style="color:#666;"><span style="color:#999;padding:0 5px;">></span>{{pagetitle2}}</span>
                </h3>
                <router-view/>
            </div>
        </div>
    </div>
</template>
<script>
import myLeftArea from "@/components/assembly/leftArea.vue";
export default {
    components:{myLeftArea},
    data() {
        return {
            uuid: '',
            title:'社区配餐',//侧边栏标题
            headerTitle:'社区配餐·运营后台',//头标题
            pagetitle:'',//每页标题
            pagetitle2:'',
            leftcontent:[],//侧边栏数据
            // leftcontent:[//侧边栏数据
            //     {
            //         name:'概况',
            //         children:[
            //             {name:'实时概况',index:'/index'},
            //         ],
            //     },
            //     {name:'商家管理',
            //         children:[
            //             {name:'商家列表',index:'/index/merchantManagement'},
            //             {name:'入驻申请',index:'/index/occupancyApplication'},
            //         ]
            //     }, 
            //     {name:'团长管理',
            //         children:[
            //             {name:'团长列表',index:'/index/headList'},
            //             {name:'团长入驻申请',index:'/index/afresidence'},
            //             {name:'团长评价',index:'/index/headListevaluate'},
            //         ]
            //     },
            //     {name:'订单管理',
            //         children:[
            //             {name:'订单明细',index:'/index/orderDetail'},
            //         ]
            //     },
            //     {name:'财务管理',
            //         children:[
            //             {name:'财务报表',index:'/index/financialReport'},
            //             {name:'申诉订单',index:'/index/financialComplaint'},
            //             {name:'提现申请记录',index:'/index/embodimentApplication'},
            //             {name:'收款账户',index:'/index/financialCollection'},
            //         ]
            //     },
            //     {name:'系统管理',
            //         children:[
            //             {name:'角色管理',index:'/index/systemrole'},
            //             {name:'员工管理',index:'/index/systememployees'},
            //             {name:'菜单管理',index:'/index/systemmenu'},
            //         ]
            //     },
            //     {name:'秒杀管理',
            //         children:[
            //             {name:'秒杀时间',index:'/index/secondsTime'},
            //         ]
            //     },
            //     {name:'通知公告',
            //         children:[
            //             {name:'通知消息',index:'/index'},
            //             {name:'消息类型',index:'/index'},
            //         ]
            //     },
            //     {name:'在线客服'},
            //     {name:'操作日志',
            //         children:[
            //             {name:'操作日志',index:'/index/operationLog'},
            //         ]
            //     },
            // ],
            uname:'',//用户名称
            time:'',//实时时间
        }
    },
    // created() {
    //     this.getUuid()//navbar传参给客服页面    uuid登录后cookies获取的
    // },
    mounted(){
        this.getAll()
        this.uname=sessionStorage.getItem('uname')
        setInterval(() => {
            this.time=Date.parse(new Date())
        }, 1000);
    },
    methods: {
        // getUuid() {
        //     this.axios.post("/operate/sys/rabbit/falselogin?userid=" + 1).then(res => {
        //         this.uuid = res.data.data.uuid;
        //         sessionStorage.setItem("uuid", this.uuid);
        //     })
        // },
        //获取菜单栏
        getAll() {
            this.axios({
                url:'/permission/getAll',
                method:'post',
                data:JSON.stringify({
                    permissionName: '', // 搜索字段
                    page: '1', // 当前页
                    pageSize: '40' // 每页记录数
                })
            }).then(res=>{
                var arr=res.data.data.list
                console.log(arr)
                arr.forEach(e => {
                    var obj={
                        name:e.permissionName,
                        children:[]
                    }
                    e.childs.forEach(ele=>{
                        obj.children.push({name:ele.permissionName,index:ele.permission})
                    })
                    this.leftcontent.push(obj)
                });
                console.log('菜单111',this.leftcontent)
            })
        },
        leftAreaSuccess(pagetitle){
            this.pagetitle=pagetitle
        },
        //退出
        out(){
            sessionStorage.clear();
            this.$store.commit('out_mutation')
            this.$router.push('/')
            window.location.reload()
        },
        //时间戳
        format(shijianchuo) {
            var time = new Date(shijianchuo);
            var y = time.getFullYear();
            var m = time.getMonth() + 1;
            var d = time.getDate();
            var h = time.getHours();
            var f = time.getMinutes();
            var s = time.getSeconds();
            // return y + '-' + this.add0(m) + '-' + this.add0(d) +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
            return y + '-' + m + '-' + d +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
        },
        //小于10的时候，前边加0（08：08：12）
        add0(m) {
            return m < 10 ? '0' + m : m
        },
    },
    watch:{
        $route(to , from){
            console.log(to.path)
            var reg=new RegExp("/index/orderDetails");
            var reg2=new RegExp("/index/embodimentDetail");
            var reg3=new RegExp("/index/financialComplaint");
            var reg4=new RegExp("/index/notice");
            var reg5=new RegExp("/index/afresidence");
            if(reg.test(to.path)){
                this.pagetitle2='订单详情'
            }else if(reg2.test(to.path)){
                this.pagetitle2='提现申请详情'
            }else{
                this.pagetitle2=''
            }
            if(reg3.test(to.path)){
                this.pagetitle='申诉订单'
            }
            if(reg4.test(to.path)){
                this.pagetitle='通知消息'
            }
            if(reg5.test(to.path)){
                this.pagetitle='团长入驻申请'
            }
        }
    }
}
</script>
<style scoped>
.index{
    /* width: 100vw; */
    min-width: 1080px;
    min-height: 100vh;
    display: flex;
}
.left-area-box{
    width: 204px;
}
.index-left{
    width: 204px;
    transition: all .3s;
    position: fixed;
}
.index-right{
    width: calc(100% - 204px);
    background: rgb(240, 240, 240);
}
.right-header{
    width: 100%;
    height: 86px;
    padding:0 30px;
    box-sizing: border-box;
    line-height: 42px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
}
.header-left{
    font-size: 23px;
    color: #333333;
    display: flex;
    align-items: center;
}
.header-right{
    font-size: 16px;
    color: #666;
}
.inner-box{
    padding:20px 20px 40px 20px ;
    background: #fff;
    margin: 10px 0 0 10px;
    position: relative;
    color: #333333;
	height: calc(100% - 86px - 10px);
}

/* h3标题 */
.pagetitleClick{
    font-size: 20px;
    color: #333;
    font-weight: 400;
}
</style>